<template>
  <div>
    <el-form ref="form" :model="form" label-width="280px">
      <div class="outmain ba_f">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="同城配送" name="tcps"></el-tab-pane>
          <el-tab-pane label="配送区域" name="psqy"></el-tab-pane>
        </el-tabs>
        <div class="shuju_title mar_t20 mar_b20">
          <div class="shuju_title_text">
            <span>同城配送</span>
          </div>
        </div>
        <div class="ba_f59 pad_20 flex-bet">
          <div class>
            <div class="wei fon_14">商家配送</div>
            <div class="mar_t10">商家配送</div>
          </div>
          <div class>
            <el-switch v-model="form.storeOpen" disabled active-value="1" inactive-value="2" @change="handClickSwitch($event,'1')"></el-switch>
          </div>
        </div>
        <div v-show="deliveryShow.indexOf('2') >= 0">
          <div class="ba_f59 pad_20 flex-bet mar_t20">
            <div class>
              <div class="wei fon_14">达达配送</div>
              <div class="mar_t10">达达配送</div>
            </div>
            <div class>
              <el-switch v-model="form.dadaOpen" active-value="1" inactive-value="2" @change="handClickSwitch($event,'2')"></el-switch>
            </div>
          </div>
          <div v-if="form.dadaOpen=='1'" class="mar_t20">
            <el-form-item label="商家ID" :required="true">
              <el-input v-model="form.dadaShopId" placeholder="请输入商家ID"></el-input>
            </el-form-item>
            <el-form-item label="Appkey" :required="true">
              <el-input v-model="form.dadaAppKey" placeholder="请输入Appkey"></el-input>
            </el-form-item>
            <el-form-item label="AppSecret" :required="true">
              <el-input v-model="form.dadaAppSecret" placeholder="请输入AppSecret"></el-input>
            </el-form-item>
            <el-form-item label="商家门店编号" :required="true">
              <el-input v-model="form.dadaShopNo" placeholder="请输入商家门店编号"></el-input>
            </el-form-item>
          </div>
        </div>
        <div v-show="deliveryShow.indexOf('3') >= 0">
          <div class="ba_f59 pad_20 flex-bet mar_t20">
            <div class>
              <div class="wei fon_14">点我达</div>
              <div class="mar_t10">点我达</div>
            </div>
            <div class>
              <el-switch v-model="form.dwdOpen" active-value="1" inactive-value="2" @change="handClickSwitch($event,'3')"></el-switch>
            </div>
          </div>
          <div v-if="form.dwdOpen=='1'" class="mar_t20">
            <el-form-item label="Token" :required="true">
              <el-input v-model="form.dwdToken" placeholder="请输入商家Token"></el-input>
            </el-form-item>
            <el-form-item label="Appkey" :required="true">
              <el-input v-model="form.dwdAppKey" placeholder="请输入Appkey"></el-input>
            </el-form-item>
            <el-form-item label="AppSecret" :required="true">
              <el-input v-model="form.dwdAppSecret" placeholder="请输入AppSecret"></el-input>
            </el-form-item>
            <el-form-item label="商家门店编号" :required="true">
              <el-input v-model="form.dwdStoreNo" placeholder="请输入商家门店编号"></el-input>
              <div class="yb_margin lh16">
                回调url地址：
                <span class="color_3">{{form.dianCallBack}}</span>
              </div>
            </el-form-item>
          </div>
        </div>
        <div v-show="deliveryShow.indexOf('4') >= 0">
          <div class="ba_f59 pad_20 flex-bet mar_t20">
            <div class>
              <div class="wei fon_14">{{form.makeName || '码科配送'}}</div>
              <div class="mar_t10">{{form.makeName || '码科配送'}}</div>
            </div>
            <div class>
              <el-switch v-model="form.makeOpen" active-value="1" inactive-value="2" @change="handClickSwitch($event,'4')"></el-switch>
            </div>
          </div>
          <div v-if="form.makeOpen=='1'" class="mar_t20">
            <el-form-item :required="true">
              <span slot="label">{{form.makeName}}Url</span>
              <el-input v-model="form.makeUrl" placeholder="请输入Url">
                <template slot="prepend">https://</template>
              </el-input>
            </el-form-item>
            <el-form-item :required="true">
              <span slot="label">{{form.makeName}}Token</span>
              <el-input v-model="form.makeToken" placeholder="请输入Token"></el-input>
            </el-form-item>
            <el-form-item :required="true">
              <span slot="label">{{form.makeName}}AppId</span>
              <el-input v-model="form.makeAppId" placeholder="请输入AppId"></el-input>
            </el-form-item>
          </div>
        </div>
        <div v-show="deliveryShow.indexOf('5') >= 0">
          <div class="ba_f59 pad_20 flex-bet mar_t20">
            <div class>
              <div class="wei fon_14">顺丰同城</div>
              <div class="mar_t10">顺丰同城</div>
            </div>
            <div class>
              <el-switch v-model="form.sfOpen" active-value="1" inactive-value="2" @change="handClickSwitch($event,'5')"></el-switch>
            </div>
          </div>
          <div v-if="form.sfOpen=='1'" class="mar_t20">
            <el-form-item label="顺丰AppId" :required="true">
              <el-input v-model="form.sfAppId" placeholder="请输入顺丰AppId"></el-input>
            </el-form-item>
            <el-form-item label="Appkey" :required="true">
              <el-input v-model="form.sfAppKey" placeholder="请输入顺丰Appkey"></el-input>
            </el-form-item>
            <el-form-item label="顺丰StoreId" :required="true">
              <el-input v-model="form.sfStoreId" placeholder="请输入顺丰StoreId"></el-input>
              <div class="yb_margin lh16">
                回调url地址：
                <span class="color_3">{{form.sfcallBack}}</span>
              </div>
            </el-form-item>
          </div>
        </div>
        <div v-show="deliveryShow.indexOf('6') >= 0">
          <div class="ba_f59 pad_20 flex-bet mar_t20">
            <div class>
              <div class="wei fon_14">蜂鸟即配</div>
              <div class="mar_t10">蜂鸟即配</div>
            </div>
            <div class>
              <el-switch v-model="form.fnOpen" active-value="1" inactive-value="2" @change="handClickSwitch($event,'6')"></el-switch>
            </div>
          </div>
          <div v-if="form.fnOpen=='1'" class="mar_t20">
            <el-form-item label="蜂鸟AppId" :required="true">
              <el-input v-model="form.fnAppId" placeholder="请输入蜂鸟AppId"></el-input>
            </el-form-item>
            <el-form-item label="Appkey" :required="true">
              <el-input v-model="form.fnAppKey" placeholder="请输入Appkey"></el-input>
            </el-form-item>
            <el-form-item label="蜂鸟StoreId" :required="true">
              <el-input v-model="form.fnStoreId" placeholder="请输入蜂鸟StoreId"></el-input>
            </el-form-item>
          </div>
        </div>
        <div v-show="deliveryShow.indexOf('7') >= 0">
          <div class="ba_f59 pad_20 flex-bet mar_t20">
            <div class>
              <div class="wei fon_14">闪送</div>
              <div class="mar_t10">闪送</div>
            </div>
            <div class>
              <el-switch v-model="form.ssOpen" active-value="1" inactive-value="2" @change="handClickSwitch($event,'7')"></el-switch>
            </div>
          </div>
          <div v-if="form.ssOpen=='1'" class="mar_t20">
            <el-form-item label="商户ID" :required="true">
              <el-input v-model="form.ssShopId" placeholder="请输入商户ID"></el-input>
            </el-form-item>
            <el-form-item label="闪送App-key" :required="true">
              <el-input v-model="form.ssAppId" placeholder="请输入闪送App-key"></el-input>
            </el-form-item>
            <el-form-item label="闪送App_secret" :required="true">
              <el-input v-model="form.ssAppKey" placeholder="请输入闪送App秘钥"></el-input>
              <div class="yb_margin">本系统对接的为商户型API</div>
              <div class="yb_margin lh16">
                回调url地址：
                <span class="color_3">{{form.sscallBack}}</span>
              </div>
            </el-form-item>
          </div>
        </div>
        <div v-show="deliveryShow.indexOf('8') >= 0">
          <div class="ba_f59 pad_20 flex-bet mar_t20">
            <div class>
              <div class="wei fon_14">uu跑腿</div>
              <div class="mar_t10">uu跑腿</div>
            </div>
            <div class>
              <el-switch v-model="form.uuOpen" active-value="1" inactive-value="2" @change="handClickSwitch($event,'8')"></el-switch>
            </div>
          </div>
          <div v-if="form.uuOpen=='1'" class="mar_t20">
            <el-form-item label="uuOpenId" :required="true">
              <el-input v-model="form.uuOpenId" placeholder="请输入uuOpenId"></el-input>
            </el-form-item>
            <el-form-item label="uuAppId" :required="true">
              <el-input v-model="form.uuAppId" placeholder="请输入uuAppId"></el-input>
            </el-form-item>
            <el-form-item label="uuAppKey" :required="true">
              <el-input v-model="form.uuAppKey" placeholder="请输入uuAppKey"></el-input>
            </el-form-item>
          </div>
        </div>
        <div v-show="deliveryShow.indexOf('9') >= 0">
          <div class="ba_f59 pad_20 flex-bet mar_t20">
            <div class>
              <div class="wei fon_14">{{form.yunbeiName || '云贝配送'}}</div>
              <div class="mar_t10">{{form.yunbeiName || '云贝配送'}}</div>
            </div>
            <div class>
              <el-switch v-model="form.yunbeiOpen" active-value="1" inactive-value="2" @change="handClickSwitch($event,'9')"></el-switch>
            </div>
          </div>
          <div v-if="form.yunbeiOpen=='1'" class="mar_t20">
            <el-form-item :required="true">
              <span slot="label">{{form.yunbeiName}}Url</span>
              <el-input v-model="form.yunbeiUrl" placeholder="请输入Url">
                <template slot="prepend">https://</template>
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="选择版本" :required="true" class="mar_t20">
              <el-radio-group v-model="form.yunbeiedition">
                <el-radio label="1">微擎版</el-radio>
                <el-radio label="2">独立版</el-radio>
              </el-radio-group>
            </el-form-item>-->
            <el-form-item label="商户编号" :required="true">
              <el-input v-model="form.yunbeiAppId" placeholder="请输入商户编号"></el-input>
            </el-form-item>
            <el-form-item label="AppSecret" :required="true">
              <el-input v-model="form.yunbeiAppSecret" placeholder="请输入AppSecret"></el-input>
            </el-form-item>
            <el-form-item label="AppKey" :required="true">
              <el-input v-model="form.yunbeiAppKey" placeholder="请输入AppKey"></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="ba_f pad_20 mar_t20">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>配送设置</span>
          </div>
        </div>
        <el-form-item label="接单后自动配送" :required="true" class="mar_t20">
          <el-radio-group v-model="form.automatic">
            <el-radio label="1">开启</el-radio>
            <el-radio label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="优先配送方式" :required="true">
          <el-radio-group v-model="form.first">
            <el-radio label="1" v-if="form.storeOpen=='1'">商户配送</el-radio>
            <el-radio label="2" v-if="form.dadaOpen=='1'">达达配送</el-radio>
            <el-radio label="3" v-if="form.dwdOpen=='1'">点我达</el-radio>
            <el-radio label="4" v-if="form.makeOpen=='1'">{{form.makeName}}</el-radio>
            <el-radio label="5" v-if="form.sfOpen=='1'">顺丰同城</el-radio>
            <el-radio label="6" v-if="form.fnOpen=='1'">蜂鸟即配</el-radio>
            <el-radio label="7" v-if="form.ssOpen=='1'">闪送</el-radio>
            <el-radio label="8" v-if="form.uuOpen=='1'">uu跑腿</el-radio>
            <el-radio label="9" v-if="form.yunbeiOpen=='1'">{{form.yunbeiName}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备选配送方式" :required="true">
          <el-checkbox-group v-model="form.alternative"></el-checkbox-group>
          <el-checkbox-group v-model="form.alternative">
            <el-checkbox label="1" v-if="form.storeOpen=='1' && form.first!='1'">商户配送</el-checkbox>
            <el-checkbox label="2" v-if="form.dadaOpen=='1' && form.first!='2'">达达配送</el-checkbox>
            <el-checkbox label="3" v-if="form.dwdOpen=='1' && form.first!='3'">点我达</el-checkbox>
            <el-checkbox label="4" v-if="form.makeOpen=='1' && form.first!='4'">{{form.makeName}}</el-checkbox>
            <el-checkbox label="5" v-if="form.sfOpen=='1' && form.first!='5'">顺丰同城</el-checkbox>
            <el-checkbox label="6" v-if="form.fnOpen=='1' && form.first!='6'">蜂鸟即配</el-checkbox>
            <el-checkbox label="7" v-if="form.ssOpen=='1' && form.first!='7'">闪送</el-checkbox>
            <el-checkbox label="8" v-if="form.uuOpen=='1' && form.first!='8'">uu跑腿</el-checkbox>
            <el-checkbox label="9" v-if="form.yunbeiOpen=='1' && form.first!='9'">{{form.yunbeiName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
    </el-form>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>
<script>
import { getStoreConfig, getConfig, getCopy, postStoreConfig } from '@/api/setup';
export default {
  data() {
    return {
      activeName: 'tcps',
      form: {
        ident: 'deliveryMode',
        identName: '配送方式',
        storeId: '',
        storeOpen: '1',
        dadaOpen: '2',
        dadaShopId: '',
        dadaShopNo: '',
        dadaAppKey: '',
        dadaAppSecret: '',
        dwdOpen: '2',
        dwdToken: '',
        dwdStoreNo: '',
        dwdAppKey: '',
        dwdAppSecret: '',
        makeOpen: '2',
        makeUrl: '',
        makeToken: '',
        makeAppId: '',
        sfOpen: '2',
        sfAppId: '',
        sfAppKey: '',
        sfStoreId: '',
        fnOpen: '2',
        fnAppId: '',
        fnAppKey: '',
        fnStoreId: '',
        ssOpen: '2',
        ssShopId: '',
        ssAppId: '',
        ssAppKey: '',
        sscallBack: '',
        uuOpen: '2',
        uuOpenId: '',
        uuAppId: '',
        uuAppKey: '',
        automatic: '2',
        first: '1',
        alternative: [],
        makeName: '码科配送',
        yunbeiName: '云贝配送',
        yunbeiOpen: '2',
        yunbeiUrl: '',
        yunbeiedition: '1',
        yunbeiAppId: '',
        yunbeiAppSecret: '',
        yunbeiAppKey: ''
      },
      alternativeOptions: [],
      deliveryShow: []
    };
  },
  created() {
    this.form.storeId = this.$route.query.storeId || '';
    this.bus.$emit('loading', true);
    this.init();
  },
  methods: {
    handClickSwitch(e, key) {
      if (e == 2 && this.form.first == key) {
        this.form.first = '0';
      }
      if (e == 2 && this.form.alternative.indexOf(key) >= 0) {
        this.form.alternative.splice(this.form.alternative.indexOf(key), 1);
      }
    },
    async init() {
      // 获取配送方式
      getCopy({ ident: 'delivery', storeId: this.form.storeId }).then((res) => {
        if (res.code == 1) {
          this.deliveryShow = res.data.deliveryMode;
        }
      });
      // 获取设置数据
      getStoreConfig({ ident: 'deliveryMode', storeId: this.form.storeId }).then((res) => {
        if (res.code == 1) {
          Object.assign(this.form, res.data);
          this.form.storeOpen = '1';
          this.bus.$emit('loading', false);
        }
      });
    },
    handleClick() {
      if (this.activeName == 'tcps') {
        this.$router.push(`/storecitydistribution?storeId=${this.form.storeId}`);
      } else if (this.activeName == 'psqy') {
        this.$router.push(`/storeregiondistribution?storeId=${this.form.storeId}`);
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          postStoreConfig(this.form).then((res) => {
            this.$baseMessage(res.msg, 'success');
            this.init();
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
